<template>
  <div class="chatpage-wrap">
    <div class="open-list" v-show="!historyShow" @click="onOpenHistory">打开历史对话</div>
    <div class="session-list">
      <SeesionList
        v-show="historyShow"
        @hide="onCloseHistory"
        @selectHistory="selectHistory"
      ></SeesionList>
    </div>
    <div class="box">
      <div :class="appear ? 'box-card2' : 'box-card'">
        <div class="headrow">
          <div class="left-wrap">
            <div class="txt">有问必答，我是你的</div>
            <div class="dy-txt">智能助手</div>
          </div>
          <div class="bgsview">
            <el-tooltip content="重新提问">
              <a @click="clearContent" link class="bg-btn-question">
                <img src="@/assets/images/suspension/tiwen.png" />
              </a>
            </el-tooltip>
            <el-tooltip content="调试日志">
              <WebSocketComp :sessionID="sessionId" @appear="changeAppear"></WebSocketComp>
            </el-tooltip>
            <el-tooltip content="帮助">
              <a @click="handleHelpDialog" link class="bg-btn-help">
                <img src="@/assets/images/suspension/bangzhu.png" style="width: 18px" />
              </a>
            </el-tooltip>
            <help v-if="helpDialog" ref="helpDialog"></help>
            <watchContent v-if="openDialog" ref="testDialog" @newQu="getnewqu"></watchContent>
            <div class="dianji-wrap">
              <div class="dianji-txt">每天一分钟，解锁我的无限潜能！</div>
              <div class="dianji-img" @click="showdialog">
                <img src="@/assets/images/dianji.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="iconrobot" v-if="mode == 'dark'">
          <img src="@/assets/images/zicon-robot.gif" alt="" />
        </div>
        <div class="card-class" ref="chat_main">
          <img
            v-if="mode == 'dark'"
            class="robotview"
            src="@/assets/images/bg1.png"
            alt=""
            style="margin-top: 1.5%; width: 60vw; height: 81%; margin-left: -1.5vw"
          />
          <div class="relative-container">
            <img
              ref="audioImg"
              v-if="isPlayAudio"
              src="@/assets/images/suspension/szr.gif"
              alt="Animated Gif"
              class="suspended-gif"
              @load="onGifLoad"
            />
          </div>
          <div v-for="msg in msgList" :key="msg.msgId" class="chat_div_list">
            <el-row class="timeview" v-if="msg.time">{{ msg.time }}</el-row>
            <el-row v-if="msg.type == 'text'" class="text-item">
              <indexContent
                @message="getnewqu"
                :isClick="isClick"
                ref="dialigContent"
              ></indexContent>
            </el-row>

            <el-row v-if="msg.type == 'chatIn'" class="text-item-right">
              <el-card class="cardstle ansview card-in">
                <div class="contentview" @click="copyText(msg)">
                  <el-popover
                    :visible="msg.visible"
                    placement="left"
                    title=""
                    :offset="30"
                    :width="0"
                    :fallback-placements="['bottom', 'top', 'right', 'left']"
                  >
                    <template #reference>
                      <span>{{ msg.content }}</span>
                    </template>
                    <div class="cardstle qviewback card-out" style="max-width: 600px">
                      <el-row class="contentview">
                        根据&nbsp;<span style="color: #ff737b">{{ msg.lastIndicatorName }}</span
                        >&nbsp;我发现了多个相似的指标，请告诉我您想查询的是:
                      </el-row>
                      <el-row class="contentview">
                        <div
                          v-if="
                            msg.multipleIndResultBOList && msg.multipleIndResultBOList.length > 0
                          "
                          class="other-quetion"
                        >
                          <div class="multiple-quetion-list">
                            <div
                              v-for="(item, index) in msg.multipleIndResultBOList"
                              @click="multipleIndicatorsSent(item)"
                              class="multiple-indicator-wrap"
                            >
                              {{ item.newIndicatorName }}
                            </div>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </el-popover>
                </div>
              </el-card>
              <img
                style="margin-left: 7px; margin-top: 0"
                class="mcclass"
                :src="img.userlogo"
                fit="contain"
              />
            </el-row>
            <el-row v-if="msg.type == 'ansOut'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <QashowcompVue
                :dTime="msg.time"
                :dataSource="msg.dataSource"
                :orgsObj="orgObj"
                :sessionID="sessionId"
                :logSessionId="logSessionId"
                @fuzzySent="childSent"
                @dataBySql="getDataBySql"
                @sendFbMessage="sendFbMessage"
                @changePlayAudioStatus="changePlayAudioStatus"
                :isClick="isClick"
              ></QashowcompVue>
            </el-row>
            <el-row v-if="msg.type == 'chartOut'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview" v-html="msg.content"></el-row>
                <el-row class="contentview">
                  <div
                    v-if="msg.indicatorTexts && msg.indicatorTexts.length > 0"
                    class="other-quetion"
                  >
                    <span>您是不是想查询：</span>
                    <div class="other-quetion-list">
                      <span v-for="(item, index) in msg.indicatorTexts" @click="childSent(item)">
                        {{ item }}
                      </span>
                    </div>
                  </div>
                </el-row>
              </el-card>
            </el-row>
            <el-row v-if="msg.type == 'chartKnowledgeOut'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview" v-html="msg.content"></el-row>
                <el-row class="contentview">
                  <div style="display: flex; align-items: center; width: 100%; margin-top: 0.02rem">
                    <span style="color: grey">出处：</span>
                  </div>
                  <div style="display: flex; flex-wrap: wrap">
                    <div
                      v-for="sourceData in msg.sourceDatas"
                      class="indicator-tree-wrap"
                      @click="showdialog(1)"
                    >
                      {{ sourceData }}
                    </div>
                  </div>
                </el-row>
              </el-card>

              <!---您可以继续问我--->
              <!--          <div v-if="msg.fuzzyTexts&&msg.fuzzyTexts.length>0" class="card-wrap-zindex" id="div2">-->
              <!--            <div class="other-wrap">您可以继续问我：</div>-->
              <!--            <div style="display: flex;flex-wrap: wrap;">-->
              <!--              <a v-for="(item,index) in msg.fuzzyTexts" :key="item" class="a-wrap" @click="childSent(item)">-->
              <!--                <img v-if="index===0" src="@/assets/images/suspension/qu0.png" style="height: 18px">&nbsp;-->
              <!--                <img v-else-if="index===1" src="@/assets/images/suspension/qu1.png" style="height: 18px">&nbsp;-->
              <!--                <img v-else-if="index===2" src="@/assets/images/suspension/qu2.png" style="height: 18px">&nbsp;-->
              <!--                {{item}}-->
              <!--              </a>-->
              <!--            </div>-->
              <!--          </div>-->
            </el-row>
            <!--取数问答错误推荐 begin-->
            <el-row v-if="msg.type == 'chartOut_410'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview">
                  <span>我还在成长，没能找到答案。您目前具备以下数据权限：</span>
                  <label v-for="(item, index) in powerTableList.slice(0, 3)">
                    <span v-if="index != 0">、</span>
                    <span style="color: #000; font-weight: bold">{{ item.tableChiName }}</span>
                  </label>
                  <span v-if="powerTableList.length > 3">...</span>
                </el-row>
                <el-row class="contentview">
                  <span>，或者您可以直接进入</span>
                  <label
                    style="color: #5c7cff; font-weight: bold; cursor: pointer"
                    @click="showdialog()"
                    >快速上手</label
                  >
                  <span>功能操作</span>
                </el-row>
                <el-row class="contentview"
                  ><span>
                    <div>
                      <span style="white-space: normal">
                        您也可以
                        <el-tooltip
                          effect="light"
                          content="点击订阅该问题，系统讲自动加工相应的指标数据，请稍后在我的消息中查看问题的数据准备情况"
                          placement="top-start"
                        >
                          <span
                            style="color: #5c7cff; margin-left: 5px; cursor: pointer"
                            @click="sendFbMessage('')"
                          >
                            订阅该问题
                          </span>
                        </el-tooltip>
                      </span>
                    </div>
                  </span></el-row
                >
              </el-card>
            </el-row>
            <el-row v-if="msg.type == 'chartOut_recommend'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview" v-html="msg.content"></el-row>
                <el-row class="contentview">
                  <div v-if="msg.fuzzyTexts && msg.fuzzyTexts.length > 0" class="other-quetion">
                    <div class="other-quetion-list">
                      <span v-for="(item, index) in msg.fuzzyTexts" @click="childSent(item)">
                        {{ item }}
                      </span>
                    </div>
                  </div>
                </el-row>
              </el-card>
            </el-row>
            <el-row v-if="msg.type == 'chartOut_multiple_indicators'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview">
                  在理解您的提问时，我产生了一些歧义。有歧义的地方如下，您可以通过选择，帮助我更精准的回答您的问题：
                </el-row>
                <el-row class="contentview">
                  <div
                    v-if="msg.multipleIndResultBOList && msg.multipleIndResultBOList.length > 0"
                    class="other-quetion"
                  >
                    <div class="multiple-quetion-list">
                      <div
                        v-for="(item, index) in msg.multipleIndResultBOList"
                        style="display: flex; align-items: center; height: 35px"
                      >
                        <div style="min-width: 85px; text-align: right">
                          <span style="color: #f46868">*</span>{{ item.indicatorName }}：
                        </div>
                        <div
                          v-for="(child, childIndex) in item.multipleIndChildResultBOList"
                          @click="
                            multipleIndicatorsSent(
                              msg.multipleIndResultBOList,
                              item,
                              index,
                              childIndex
                            )
                          "
                          :disabled="child.disabledFlag"
                          :class="
                            child.disabledFlag
                              ? child.chooseFlag
                                ? 'multiple-indicator-wrap-active'
                                : 'multiple-indicator-wrap'
                              : 'multiple-indicator-wrap-disabled'
                          "
                        >
                          {{ child.newIndicatorName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </el-row>
              </el-card>
            </el-row>
            <el-row v-if="msg.type == 'chartOut_423'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out">
                <el-row class="contentview">
                  <div style="display: flex; align-items: center">
                    <span>您没有</span>
                    <label style="color: #3ccefa">{{ msg.tableName }}</label>
                    <span>表的查询权限</span>
                    <el-button
                      type="primary"
                      size="small"
                      style="margin-left: 10px"
                      @click="approveTable(msg.tableCode)"
                      >申请权限</el-button
                    >
                  </div>
                </el-row>
              </el-card>
            </el-row>
            <el-row v-if="msg.type == 'chartOut_501'" class="text-item">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback-501 card-out">
                <div style="height: 28px; display: flex; align-items: center; font-size: 14px">
                  <span>我还在成长，没能找到答案，为您展示</span>
                  <span style="color: #e5484d; font-size: 15px; font-weight: bold"
                    >&nbsp;{{ msg.dataSource.indicatorChinese }}&nbsp;</span
                  >
                  <span>的相关信息如下：</span>
                </div>
                <div class="doudi-card">
                  <div style="display: flex; align-items: center; font-size: 16px">
                    <span style="margin-right: 5px">{{ msg.dataSource.indicatorChinese }}</span>
                    <el-icon><InfoFilled /></el-icon>
                  </div>
                  <div class="period-cj-wrap">
                    <div class="period-wrap">
                      <span v-if="msg.dataSource.dataType == 'M'">{{
                        formatDateFun(msg.dataSource.minPeriod, 'YYYY-MM')
                      }}</span>
                      <span v-else>{{
                        formatDateFun(msg.dataSource.minPeriod, 'YYYY-MM-DD')
                      }}</span>
                      <span>&nbsp;至&nbsp;</span>
                      <span v-if="msg.dataSource.dataType == 'M'">{{
                        formatDateFun(msg.dataSource.maxPeriod, 'YYYY-MM')
                      }}</span>
                      <span v-else>{{
                        formatDateFun(msg.dataSource.maxPeriod, 'YYYY-MM-DD')
                      }}</span>
                    </div>
                    <div v-if="msg.dataSource.dataType == 'M'" class="period-choose-wrap">
                      <el-button
                        type="primary"
                        plain
                        @click="getDataAnalysis(msg, 0)"
                        :disabled="getPeriodRange(msg.dataSource, 0)"
                        size="small"
                        >当月</el-button
                      >
                      <el-button
                        type="primary"
                        plain
                        @click="getDataAnalysis(msg, -1)"
                        :disabled="getPeriodRange(msg.dataSource, -1)"
                        size="small"
                        >上月</el-button
                      >
                      <el-button
                        type="primary"
                        plain
                        @click="getDataAnalysis(msg, -2)"
                        :disabled="getPeriodRange(msg.dataSource, -2)"
                        size="small"
                        >上上月</el-button
                      >
                    </div>
                    <div v-else class="period-choose-wrap">
                      <el-button type="primary" plain @click="getDataAnalysis(msg, 0)" size="small"
                        >当天</el-button
                      >
                      <el-button type="primary" plain @click="getDataAnalysis(msg, -1)" size="small"
                        >昨天</el-button
                      >
                      <el-button type="primary" plain @click="getDataAnalysis(msg, -2)" size="small"
                        >前天</el-button
                      >
                    </div>
                    <el-popover
                      placement="bottom"
                      title=""
                      :width="200"
                      trigger="click"
                      :visible="msg.visible"
                    >
                      <template #reference>
                        <el-icon
                          style="color: #5c7cff; margin-left: 5px"
                          @click="msg.visible = !msg.visible"
                          ><EditPen
                        /></el-icon>
                      </template>
                      <template #default>
                        <el-date-picker
                          v-if="msg.dataSource.dataType == 'M'"
                          v-model="msg.dataSource.endPeriod"
                          type="month"
                          placeholder="选择日期"
                          style="width: 100%"
                          :disabled-date="msg.dataSource.disabledDate"
                          @change="changeDate501(msg, msg.dataSource.endPeriod)"
                        />
                        <el-date-picker
                          v-else
                          v-model="msg.dataSource.endPeriod"
                          type="date"
                          placeholder="选择日期"
                          style="width: 100%"
                          :disabled-date="msg.dataSource.disabledDate"
                          @change="changeDate501(msg, msg.dataSource.endPeriod)"
                        />
                      </template>
                    </el-popover>
                  </div>
                  <div style="display: flex; margin-top: 22px">
                    <div
                      style="
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        border-right: 1px solid #e0e0e0;
                        padding: 0 40px 0 0;
                      "
                    >
                      <span style="color: #333; font-size: 32px; font-weight: bold">
                        {{ to_fiexd_fun(msg.dataSource.curval, 2) }}
                        <span style="color: #666; font-size: 18px">{{
                          msg.dataSource.unitName
                        }}</span>
                      </span>
                      <span style="margin-top: 4px">
                        <span style="color: #333; font-size: 14px">本期值</span>
                        <span
                          v-if="msg.dataSource.curval - msg.dataSource.lastval > 0"
                          style="color: #e5484d"
                        >
                          <el-icon><CaretTop /></el-icon>
                          <span>{{
                            to_fiexd_fun(
                              Math.abs(msg.dataSource.curval - msg.dataSource.lastval),
                              2
                            )
                          }}</span>
                          <span>({{ to_fiexd_fun(msg.dataSource.momval, 2) }}pp)</span>
                        </span>
                        <span
                          v-if="msg.dataSource.curval - msg.dataSource.lastval <= 0"
                          style="color: #48e550"
                        >
                          <el-icon><CaretBottom /></el-icon>
                          <span>{{
                            to_fiexd_fun(
                              Math.abs(msg.dataSource.curval - msg.dataSource.lastval),
                              2
                            )
                          }}</span>
                          <span>({{ to_fiexd_fun(msg.dataSource.momval, 2) }}pp)</span>
                        </span>
                      </span>
                      <span style="color: #b7b7b7; font-size: 12px; margin-top: 8px"
                        >当前{{
                          msg.dataSource.dataType == 'M'
                            ? formatDateFun(msg.dataSource.endPeriod, 'YYYY-MM')
                            : formatDateFun(msg.dataSource.endPeriod, 'YYYY-MM-DD')
                        }}</span
                      >
                    </div>
                    <div
                      style="
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        padding: 0 0 0 40px;
                      "
                    >
                      <span style="color: #333; font-size: 32px; font-weight: bold">
                        {{ to_fiexd_fun(msg.dataSource.lastval, 2) }}
                        <span style="color: #666; font-size: 18px">{{
                          msg.dataSource.unitName
                        }}</span>
                      </span>
                      <span style="color: #333; font-size: 14px; margin-top: 4px">上期值</span>
                      <span style="color: #b7b7b7; font-size: 12px; margin-top: 8px"
                        >较{{
                          msg.dataSource.dataType == 'M'
                            ? formatDateFun(msg.dataSource.lastPeriod, 'YYYY-MM')
                            : formatDateFun(msg.dataSource.lastPeriod, 'YYYY-MM-DD')
                        }}</span
                      >
                    </div>
                  </div>
                </div>
                <div style="color: #333; font-size: 16px; margin-top: 16px; font-weight: bold">
                  趋势分析
                  <!--              <span style="font-size: 12px;color: #999;margin-left: 5px">(近半年)</span>-->
                </div>
                <div v-if="msg.dataSource.llmOutput" style="display: flex; align-items: center">
                  <div style="font-size: 13px; color: #333">{{ msg.dataSource.llmOutput }}</div>
                </div>
                <div
                  v-if="msg.id"
                  :id="'echarts501Analysis_1_' + msg.id"
                  style="width: 100%; height: 200px; margin-top: 10px"
                ></div>
                <div
                  v-if="
                    msg.dataSource.dataAnalysisCities &&
                    msg.dataSource.dataAnalysisCities.length > 0
                  "
                >
                  <div style="color: #333; font-size: 16px; margin-top: 16px; font-weight: bold">
                    地域分析
                  </div>
                  <div
                    v-if="msg.dataSource.analysisDataForword"
                    style="display: flex; align-items: center"
                  >
                    <span
                      style="
                        width: 0.03rem;
                        height: 0.03rem;
                        border-radius: 100%;
                        background: #5c7cff;
                        margin-right: 0.04rem;
                      "
                    ></span>
                    <div style="font-size: 13px; color: #333">
                      {{ msg.dataSource.analysisDataForword }}
                    </div>
                  </div>
                  <div
                    v-if="msg.dataSource.analysisDataRear"
                    style="display: flex; align-items: center"
                  >
                    <span
                      style="
                        width: 0.03rem;
                        height: 0.03rem;
                        border-radius: 100%;
                        background: #5c7cff;
                        margin-right: 0.04rem;
                      "
                    ></span>
                    <div style="font-size: 13px; color: #333">
                      {{ msg.dataSource.analysisDataRear }}
                    </div>
                  </div>
                  <div
                    v-if="msg.id"
                    :id="'echarts501Analysis_2_' + msg.id"
                    style="width: 100%; height: 200px; margin-top: 10px"
                  ></div>
                </div>
              </el-card>
            </el-row>
            <!--取数问答错误推荐 end-->
          </div>
          <div class="chat_div_list">
            <el-row class="text-item" v-show="showThiking">
              <img class="mcclass" :src="img.machinelogo" fit="contain" />
              <el-card class="cardstle qviewback card-out"
                >AI正在生成 <span class="dot">...</span>
              </el-card>
            </el-row>
          </div>
        </div>
        <div class="bottom-class" v-if="mode == 'dark'">
          <img class="voiceview" src="@/assets/images/zicon_record.png" alt="" />
          <div class="bdview">
            <span class="bdview-icon"></span>
            <el-input
              id="in-put"
              v-if="!showThiking"
              v-model="contentIn"
              type="text"
              class="borderNone"
              placeholder="请尝试输入我需要帮你查询的数据内容"
              maxlength="200"
              show-word-limit
              @focus="goFocus()"
              @blur="goBlur()"
              @keydown.enter.native.prevent="handleEnterKey"
              @input="handleInput"
              @paste="handlePasre"
            />
            <div class="ulItem" id="myHeadler" v-if="isShow" ref="myHeadler">
              <ul>
                <li
                  v-for="(item, index) in inputArr"
                  :key="item.id"
                  @mousedown="handClick(item)"
                  class="liClass"
                >
                  {{ item.indicatorName }}
                </li>
              </ul>
            </div>
            <img
              class="serchview"
              src="@/assets/images/zbtn_send.png"
              v-if="!showThiking"
              @click="sendText()"
              alt=""
            />
            <div class="suspension">
              <el-tooltip class="box-item" effect="customized" content="展示数据" placement="right">
                <div
                  :class="mulflag ? 'go-mulu-hover' : 'go-mulu'"
                  @mouseenter="mouseenterFun('mulu', true)"
                  @mouseleave="mouseleaveFun('mulu', false)"
                  @click="showdialog()"
                >
                  <span v-if="mode == 'dark'">查看指标</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="customized" content="返回顶部" placement="right">
                <div
                  :class="topflag ? 'go-top-hover' : 'go-top'"
                  @mouseenter="mouseenterFun('top', true)"
                  @mouseleave="mouseleaveFun('top', false)"
                  @click="gototop"
                >
                  <span v-if="mode == 'dark'">返回顶部</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="bottom-class" v-if="mode == 'light'">
          <el-input
            maxlength="200"
            id="in-put"
            type="textarea"
            v-if="!showThiking"
            v-model="contentIn"
            class="borderNone"
            placeholder="请尝试输入我需要帮你查询的数据内容"
            show-word-limit
            @focus="goFocus()"
            @blur="goBlur()"
            @keydown.enter.native.prevent="handleEnterKey"
            @input="handleInput"
            @paste="handlePasre"
          />
          <div class="ulItem" id="myHeadler" v-if="isShow" ref="myHeadler">
            <ul>
              <li
                v-for="(item, index) in inputArr"
                :key="item.id"
                @mousedown="handClick(item)"
                class="liClass"
              >
                {{ item.indicatorName }}
              </li>
            </ul>
          </div>
          <div class="input-btn-wrap">
            <img src="@/assets/images/yuyin.png" />
            <!-- <el-button
            class="submit-btn"
            :disabled="showThiking"
            @click="sendText()"
            alt=""
            size="small"
        >发送</el-button> -->
            <img
              src="@/assets/images/fasong.png"
              @click="sendText()"
              style="cursor: pointer; height: 30px; width: 50px"
            />
          </div>
          <div class="suspension">
            <el-tooltip class="box-item" effect="customized" content="展示数据" placement="right">
              <div
                :class="mulflag ? 'go-mulu-hover' : 'go-mulu'"
                @mouseenter="mouseenterFun('mulu', true)"
                @mouseleave="mouseleaveFun('mulu', false)"
                @click="showdialog()"
              >
                <span v-if="mode == 'dark'">查看指标</span>
              </div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="customized" content="返回顶部" placement="right">
              <div
                :class="topflag ? 'go-top-hover' : 'go-top'"
                @mouseenter="mouseenterFun('top', true)"
                @mouseleave="mouseleaveFun('top', false)"
                @click="gototop"
              >
                <span v-if="mode == 'dark'">返回顶部</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { randNm, dateFormat, to_fiexd, WidthAdaptive, fontSize, formatDate } from '@/common/util'
import QashowcompVue from './Qashowcomp.vue'
import {
  getTalkAswer,
  getValFromSQL,
  getUsrOrg,
  getAllIndicator,
  approveTable,
  getDataAnalysis,
  addMessage,
  getHistoryById
} from '@/api/chartdb'
import WebSocketComp from './WebSocketComp.vue'
import indexContent from './indexContent.vue'
import { ElMessage } from 'element-plus'
import watchContent from './WatchContent.vue'
import { ref, computed } from 'vue'
import { isNull } from 'lodash'
import help from './help.vue'
import $ from 'jquery'
import userlogoDark from '@/assets/images/userlogo.png'
import userlogoLight from '@/assets/images/suspension/touxiang.png'
import machinelogoDark from '@/assets/images/machinelogo.png'
import machinelogoLight from '@/assets/images/ai.png'
import { toSSO } from '@/common/util'
import eventBus from '@/common/eventBus'
import { v4 as uuidv4 } from 'uuid'
import moment from 'moment'
import SeesionList from './SeesionList.vue'
export default {
  name: 'zindex',
  setup() {
    //动态加载css
    let cssPath = ''
    let cssPath1 = ''
    let mode = localStorage.getItem('mode')
    if (mode == 'dark') {
      cssPath = import('/src/assets/css/dark/zindex.scss')
      cssPath1 = import('/src/assets/css/dark/index.scss')
    } else if (mode == 'light') {
      cssPath = import('/src/assets/css/light/zindex.scss')
      cssPath1 = import('/src/assets/css/light/index.scss')
    }
    return {
      cssPath,
      cssPath1
    }
  },
  components: { QashowcompVue, WebSocketComp, indexContent, watchContent, help, SeesionList },
  data() {
    return {
      mode: localStorage.getItem('mode'),
      openDialog: false,
      helpDialog: false,
      contentIn: '', // 输入框内容
      currentMsg: {
        time: '',
        msgId: '',
        type: '', // 消息类型：text，result，chatIn
        dataList: [], // 如果是查询结果，存放指令数据.如果不是空就行
        content: '' // 说明
      },
      showIpt: false, //显示输入加载框
      showThiking: false,
      contentRewrite: '', //内容改写
      timeRewrite: '', //时间改写
      sessionId: '', // 会话id
      logSessionId: '', //日志sessionId
      appear: false,
      msgList: [],
      orgObj: {}, //组织机构信息
      userAccount: '',
      isClick: true, //控制点击事件频率，点击后在数据返回之前不能点击
      inputObj: {
        lastInputText: '',
        lastMatchText: '',
        curMatchText: '',
        curMatchIndicators: [],
        lastIfMatch: false
      },
      inputArr: [],
      isShow: false,
      menuData: [],
      isDivShow: '',
      contentItem: [],
      firstArr: [],
      lastArr: [],
      myHeadler: '',
      otherHeight: 0, //相关报表和您还可以问我高度
      paste: false, //true 粘贴内容 false 输入内容
      mulflag: false,
      topflag: false,
      img: {
        userlogo: localStorage.getItem('mode') == 'dark' ? userlogoDark : userlogoLight,
        machinelogo: localStorage.getItem('mode') == 'dark' ? machinelogoDark : machinelogoLight
      },
      menus: [],
      currentRoute: this.$router.currentRoute.value.path,
      nowIndex: 0,
      replaceList: [],
      isPlayAudio: false,
      // gifSrc: '@/assets/images/suspension/szr.gif', // 替换为你的GIF路径
      timer: null, // 用于存放setTimeout的返回值
      dialogId: '', //对话id
      historyShow: false
    }
  },
  activated() {
    this.goEnd()
  },
  mounted() {
    // document.head.appendChild(cssLink)
    const unmae = localStorage.getItem('uname')
    const sname = localStorage.getItem('staffName')
    const powerTableList = localStorage.getItem('powerTableList')
    console.log('powerTableList======>', JSON.parse(powerTableList))
    this.powerTableList = powerTableList ? JSON.parse(powerTableList) : []
    this.userAccount = sname ? sname : unmae
    const menus = JSON.parse(localStorage.getItem('menus'))
    menus.forEach((item) => {
      if (item.url != this.currentRoute) {
        this.menus.push(item)
      }
    })
    console.log('powerTableList======>', this.powerTableList)
    getUsrOrg({ account: unmae, type: '1' }).then((res) => {
      var rsp = res
      if (rsp.data.code == 200) {
        var orgs = rsp.data.data
        this.orgObj = orgs
        localStorage.setItem('orgName', this.orgObj?.orgName)
        localStorage.setItem('orgLeave', this.orgObj?.orgLeave)
        localStorage.setItem('orgId', this.orgObj?.orgId)
      }
    })
    getAllIndicator().then((res) => {
      var rsp = res
      if (rsp.data.code == 200) {
        var orgs = rsp.data.data
        this.menuData = orgs
        this.inputArr = this.menuData
        localStorage.setItem('menuData', this.menuData)
      }
    })
  },
  created() {
    eventBus.$on('custom-event', (data) => {
      console.log('Received data:', data)
    })
    eventBus.$on('sendMsg', (data) => {
      this.childSent(data)
    })
    this.sessionId = randNm(6)
    this.init()
    // this.goEnd()
    this.$nextTick(() => {
      addEventListener('keyup', this.keyUp) //创建监听键盘事件
    })
  },
  methods: {
    getPeriodRange: function (dataSource, value) {
      if (dataSource.dataType == 'M') {
        console.log('value====>', value)
        return dataSource.maxPeriod < moment(new Date()).add(value, 'M').format('YYYYMM')
      } else {
        console.log(
          dataSource.maxPeriod,
          '=',
          moment(new Date()).add(value, 'd').format('YYYYMMDD')
        )
        return dataSource.maxPeriod < moment(new Date()).add(value, 'd').format('YYYYMMDD')
      }
    },
    approveTable: function (tableCode) {
      approveTable({ tableCode: tableCode }).then((res) => {
        ElMessage({
          showClose: true,
          message: '申请成功！',
          type: 'success',
          offset: '40'
        })
      })
    },
    keyUp(e) {
      if (!this.isShow) {
        return
      }
      $('#myHeadler').focus()
      if (e.keyCode == 40) {
        // 下键
        this.nowIndex = this.nowIndex + 1
        if (this.inputArr[this.nowIndex] != undefined) {
          if (this.mode == 'light') {
            $('.liClass')
              .eq(this.nowIndex)
              .css({ 'background-color': '#5c7cff', color: '#fff' })
              .siblings()
              .css({ 'background-color': '#fff', color: '#737A85' })
          } else {
            $('.liClass')
              .eq(this.nowIndex)
              .css({ 'background-color': '#2f58b980', color: '#00DEFF' })
              .siblings()
              .css({ 'background-color': '#193986', color: '#fff' })
          }
          this.$refs.myHeadler.scrollTop = 31 * (this.nowIndex - 3)
        } else {
          this.nowIndex = this.nowIndex - 1
        }
      } else if (e.keyCode == 38) {
        // 上键
        this.nowIndex = this.nowIndex - 1
        if (this.inputArr[this.nowIndex] != undefined && this.nowIndex >= 0) {
          $('.liClass')
            .eq(this.nowIndex)
            .css({ 'background-color': '#5c7cff', color: '#fff' })
            .siblings()
            .css({ 'background-color': '#fff', color: '#737A85' })
          this.$refs.myHeadler.scrollTop = 31 * (this.nowIndex - 3)
        } else {
          this.nowIndex = 0
        }
      } else if (e.keyCode == 13) {
        //回车
        if (this.inputArr[this.nowIndex]) {
          this.handClick(this.inputArr[this.nowIndex])
        } else {
          this.sendText()
        }
      }
    },
    lout() {
      localStorage.clear()
      toSSO()
    },
    goToLog(param) {
      this.$router.push({ path: param.url })
    },
    getnewqu(qu) {
      this.contentIn = qu
      this.sendText()
      this.goEnd()
    },
    mouseenterFun(type, flag) {
      if (type == 'mulu') {
        this.mulflag = flag
      } else if (type == 'top') {
        this.topflag = flag
      }
    },
    mouseleaveFun(type, flag) {
      if (type == 'mulu') {
        this.mulflag = flag
      } else if (type == 'top') {
        this.topflag = flag
      }
    },
    gototop() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.chat_main.scrollTop = 0
        }, 100)
      })
      // document.documentElement.scrollTop = 0
    },
    showdialog(param) {
      this.openDialog = true
      this.$nextTick(() => {
        this.$refs.testDialog.handleDialog(param)
      })
    },
    handlePasre() {
      this.paste = true
    },
    getOtherHeight(he) {
      this.otherHeight = he
    },
    handleInput(curInputVal) {
      curInputVal = curInputVal.replace(/\r/gi, '').replace(/\n/gi, '')
      setTimeout(() => {
        if (this.paste) {
          this.paste = !this.paste
          return false
        }
        var curInputValNew = curInputVal
        //输入框联想不含数字
        for (var i = 0; i < curInputVal.length; i++) {
          if (!isNaN(curInputVal.charAt(i))) {
            curInputValNew = curInputVal.substr(i + 1)
          }
        }
        //判断字符是否为空，如果为空，清理变量初始状态
        if (!curInputValNew && curInputValNew.length == 0) {
          this.inputArr = []
          this.isShow = false
          return
        }

        const createFuzzyMatchingReg = (search) => {
          let reg = null
          if (!search) return /^/
          search = search.toLocaleLowerCase()
          const specialCharactersReg = /^[^a-z^A-Z^0-9^\u4e00-\u9fa5]/
          eval(
            `reg = /${search
              .split('')
              .map((v) => (specialCharactersReg.test(v) ? `\\${v}` : v))
              .join('.*')}/`
          )
          return reg
        }
        this.inputObj.curMatchIndicators = ''
        //从整体开始，从前往后逐渐缩减一个字符进行匹配。使用正则表达式匹配过滤
        for (let i = curInputValNew.length; i >= 3; i--) {
          let tmpStr = curInputValNew.substring(curInputValNew.length - i, curInputValNew.length)
          this.inputObj.curMatchIndicators = this.menuData.filter((item) => {
            return createFuzzyMatchingReg(tmpStr).test(item.indicatorName.toLocaleLowerCase())
          })
          if (this.inputObj.curMatchIndicators.length > 0) {
            this.inputObj.curMatchText = tmpStr
            break
          }
        }
        //如有匹配的指标，则展示弹出框
        if (this.inputObj.curMatchIndicators.length > 0) {
          //匹配上展示弹框，并更改变量状态
          this.inputArr = this.inputObj.curMatchIndicators
          this.isShow = true
          this.nowIndex = -1
        } else {
          this.inputArr = []
          this.isShow = false
        }
        // 利用ref改变推荐词样式
        this.$nextTick(() => {
          // this.$refs.myHeadler.style.left = `${curInputVal.length * 14 + 450}px`
          if (this.mode == 'dark') {
            $('#myHeadler').css({ left: `${curInputVal.length * 1 + 450}px` })
          } else if (this.mode == 'light') {
            $('#myHeadler').css({ left: `${(curInputVal.length * 13.2 + 20) / 175}rem` })
          }
        })
      }, 200)
    },
    handClick(item) {
      let matchPos = this.contentIn.lastIndexOf(this.inputObj.curMatchText)
      //由于数字不在匹配范围，但指标中可能含有数字，在替换时找前一个字符判断是否属于指标如果是那么全部替换
      let prewStr = this.contentIn.substring(matchPos - 1, matchPos)
      let newMatchPos = prewStr + this.inputObj.curMatchText
      if (item.indicatorName.indexOf(newMatchPos) > -1) {
        this.contentIn = this.contentIn.substring(0, matchPos - 1) + item.indicatorName
      } else {
        this.contentIn = this.contentIn.substring(0, matchPos) + item.indicatorName
      }
      this.contentIn = this.contentIn.replace(/\r/gi, '').replace(/\n/gi, '')
      this.isShow = false
    },
    handleHelpDialog() {
      this.helpDialog = true
      this.$nextTick(() => {
        this.$refs.helpDialog.handleDialog()
      })
    },
    changeMode() {
      let mode = localStorage.getItem('mode')
      if (mode == 'dark') {
        mode = 'light'
      } else if (mode == 'light') {
        mode = 'dark'
      }
      localStorage.setItem('mode', mode)
      window.location.reload()
    },
    changeAppear() {
      this.appear = !this.appear
    },
    clearContent() {
      this.contentRewrite = ''
      this.timeRewrite = ''
      this.msgList = []
      this.init()
    },
    copyText(msg) {
      let oInput = document.createElement('input')
      oInput.value = msg.content
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      ElMessage({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    },
    init() {
      this.dialogId = uuidv4()
      this.currentMsg = {
        // time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        msgId: randNm(6),
        type: 'text'
        // dataSource: {},
        // content: '',
      }
      this.msgList.push(this.currentMsg)
    },
    childSent(qu) {
      this.contentIn = qu
      this.sendText()
      this.goEnd()
    },
    multipleIndicatorsSent(list, row, parentIndex, childIndex) {
      if (!row.multipleIndChildResultBOList[childIndex].disabledFlag) return false
      row.multipleIndChildResultBOList[childIndex].chooseFlag =
        !row.multipleIndChildResultBOList[childIndex].chooseFlag
      //取消同类其他已选择
      row.multipleIndChildResultBOList.forEach((item, index) => {
        if (index != childIndex) {
          item.chooseFlag = false
        }
      })
      //改变选择删除之前已选择的同类
      this.replaceList.forEach((item, index) => {
        if (item.indicatorName == row.indicatorName) {
          this.replaceList.splice(index, 1)
        }
      })
      if (row.multipleIndChildResultBOList[childIndex].chooseFlag) {
        this.replaceList.push({
          newIndicatorName: row.multipleIndChildResultBOList[childIndex].newIndicatorName,
          indicatorName: row.indicatorName
        })
      }
      //判断是否有匹配到的指标全部没有权限，如果存在那么也可以直接替换
      let nameList = [] //匹配指标 无权限 列表
      list.forEach((item) => {
        let flag = false
        item.multipleIndChildResultBOList.forEach((child) => {
          if (child.disabledFlag) {
            flag = true
          }
        })
        if (!flag) {
          nameList.push(item.indicatorName)
        }
      })
      if (this.replaceList.length == list.length - nameList.length) {
        //开始替换
        let question = list[0].question
        console.log('question====>', question)
        nameList.forEach((item) => {
          question = question.replace(item, '')
        })
        this.replaceList.forEach((item) => {
          question = question.replace(item.indicatorName, item.newIndicatorName)
        })
        this.msgList.splice(-2)
        this.contentIn = question
        this.sendText()
        this.goEnd()
      }
      // let newQuestion=question.replace(indicatorName,row.newIndicatorName)
      // this.msgList.splice(-2)
      // this.contentIn=newQuestion
      // this.sendText()
      // this.goEnd()
    },
    changePlayAudioStatus(val) {
      console.info('changePlayAudioStatus', val)
      this.isPlayAudio = val
    },
    // 定义 loadImage 方法为组件的方法
    loadImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = () => {
          resolve(img)
        }
        img.onerror = reject
        img.src = src
      })
    },
    restartGif() {
      // 使用一个有效的占位符图片来避免白屏
      // 请确保这是一个有效的占位符图片路径
      let imageUrl = this.$refs.audioImg.src
      this.$refs.audioImg.src = imageUrl

      // 异步加载新的GIF图片
      this.loadImage(imageUrl)
        .then((img) => {
          // 图片加载完成后，更新gifSrc属性
          this.$refs.audioImg.src = img.src
        })
        .catch((error) => {
          console.error('Failed to load the new GIF image:', error)
        })
    },
    onGifLoad(event) {
      const gifDuration = 3000 // GIF播放的总时长

      // 清除之前可能存在的计时器
      if (this.timer) {
        clearTimeout(this.timer)
      }

      // 设置一个新的计时器，在GIF播放完毕后重新加载图片
      this.timer = setTimeout(() => {
        this.restartGif()
      }, gifDuration)
    },
    sendFbMessage(phySql) {
      console.log('this.msgList:', this.msgList)
      if (this.msgList.length > 1) {
        let lastQ = this.msgList[this.msgList.length - 2].content
        let params = {
          message: lastQ,
          msgBody: phySql,
          msgType: 1
        }
        addMessage(params)
          .then((res) => {
            console.log('res:', res)
            if (res.data.code == 200) {
              ElMessage({
                message: '已订阅问题，请稍后在我的消息中查看问题的数据准备情况！',
                type: 'success'
              })
            } else {
              ElMessage({
                message: '订阅问题失败，请联系管理员！',
                type: 'error'
              })
            }
          })
          .catch((err) => {
            ElMessage({
              message: '订阅问题失败，请联系管理员！',
              type: 'error'
            })
          })
      }
    },
    sendText() {
      if (this.showThiking) {
        return
      }
      this.msgList.forEach((item) => {
        console.log('item=====>', item)
        item.visible = false
      })
      this.isShow = false
      if (this.contentIn == '' || this.contentIn == null) {
        return
      }
      this.contentIn = this.contentIn.replace(/\r/gi, '').replace(/\n/gi, '')
      if (this.msgList[this.msgList.length - 1].type == 'chartOut_multiple_indicators') {
        this.msgList.splice(this.msgList.length - 1, 1)
        this.replaceList = []
      }
      this.msgList.push({
        time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        msgId: randNm(6),
        type: 'chatIn',
        dataSource: {},
        content: this.contentIn,
        visible: false
      })
      this.contentIn = ''
      var that = this
      // 这里是你想要在3秒后执行的代码
      that.anserText()
      that.goEnd()
    },
    anserText() {
      //获取当前问题
      const mlenth = this.msgList.length
      const myq = this.msgList[mlenth - 1]
      if (myq.type != 'chatIn') {
        return
      }
      const currQs = myq.content

      //获取上个问题和答案
      var lastQs = ''
      var lastAs = ''
      if (mlenth > 2) {
        const lastQsObj = this.msgList[mlenth - 3]
        const lastAsObj = this.msgList[mlenth - 3]
        if (lastQsObj.type == 'chatIn') {
          lastQs = lastQsObj.content
        }
        if (lastAsObj.type == 'ansOut') {
          lastAs = lastQsObj.dataSource.sql
        }
      }

      var params = {
        answerType: '1',
        userId: this.sessionId,
        orgId: this.orgObj.orgId,
        orgName: this.orgObj.orgName,
        orgLeave: this.orgObj.orgLeave,
        originalDialog: [
          {
            question: lastQs,
            answer: lastAs
          },
          {
            question: currQs
          }
        ],
        timeRewrite: this.timeRewrite,
        contentRewrite: this.contentRewrite,
        source: 'WEB',
        appType: 1,
        dialogId: this.dialogId
      }
      this.showThiking = true
      this.isClick = false
      getTalkAswer(params)
        .then((repos) => {
          this.answerDataHandler(repos)
        })
        .catch((err) => {
          // debugger;
          console.log('err===>', err)
          this.showThiking = false
          this.$nextTick(() => {
            $('#in-put').focus()
          })
          this.isClick = true
          this.msgList.push({
            time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
            msgId: randNm(6),
            type: 'chartOut',
            dataSource: {},
            content: '当前我还未学习此类知识，后续我将联系管理员把此类知识作为学习点。'
          })
          this.goEnd()
        })
    },

    answerDataHandler(repos) {
      console.log('repos.data.code====>', repos.data.code)
      this.showThiking = false
      var res = repos.data.data
      console.log('repos.data.code====>', repos.data)
      //知识问答
      if (res && res.answerType == '3' && res.answer.code == 200) {
        let reult = res.answer.data
        let fileNames = []
        reult.docs.forEach((item) => {
          fileNames.push(item.fileName.split('.')[0])
        })
        console.log('fileNames====>', fileNames)
        const fileNameList = Array.from(new Set(fileNames))
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartKnowledgeOut',
          dataSource: {},
          content: reult.answer,
          sourceDatas: fileNameList,
          sourceDatasFlag: false
        })
        this.isClick = true
        this.goEnd()
        return
      }
      //智能取数
      if (repos.data.code == 410) {
        //无指标无维度
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut_410',
          dataSource: {}
        })
        this.isClick = true
        this.goEnd()
        return
      } else if (
        repos.data.code == 411 ||
        repos.data.code == 414 ||
        repos.data.code == 422 ||
        repos.data.code == 424
      ) {
        /**
         * 1无指标有维度
         * 2指标实体映射存在多指标
         * 3中台返回账期不对
         * 4中台权限不匹配时，根据用户权限推荐问题改造
         */
        const fuzzyTexts = repos.data.fuzzyTexts
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut_recommend',
          dataSource: {},
          content: '我还在成长，没能找到答案，您可以尝试下面的问题：',
          fuzzyTexts: fuzzyTexts
        })
        this.isClick = true
        this.goEnd()
        return
      } else if (repos.data.code == 413) {
        let indicatorNameList = []
        this.replaceList = []
        repos.data.multipleIndResultBOList.forEach((item) => {
          indicatorNameList.push(item.indicatorName)
        })
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut_multiple_indicators',
          lastIndicatorName: indicatorNameList,
          dataSource: {},
          content: '我发现了多个相似的指标，请告诉我您想查询的是：',
          multipleIndResultBOList: repos.data.multipleIndResultBOList
        })
        this.isClick = true
        this.goEnd()
        return
      } else if (repos.data.code == 423) {
        //无表访问权限时，提供申请权限按钮
        const msg = repos.data.data
        const tableName = repos.data.fuzzyTexts[0]
        const tableCode = repos.data.fuzzyTexts[1]
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut_423',
          dataSource: {},
          content: msg,
          tableName: tableName,
          tableCode: tableCode
        })
        this.isClick = true
        this.goEnd()
        return
      } else if (repos.data.code == 501) {
        let dataAnalysis = repos.data.dataAnalysis
        let maxPeriod = moment(
          dataAnalysis.maxPeriod,
          dataAnalysis.dataType == 'M' ? 'YYYYMM' : 'YYYYMMDD'
        ).toDate()
        let minPeriod = moment(
          dataAnalysis.minPeriod,
          dataAnalysis.dataType == 'M' ? 'YYYYMM' : 'YYYYMMDD'
        ).toDate()
        console.log('maxPeriod====>', maxPeriod)
        dataAnalysis.disabledDate = (time) => {
          if (!maxPeriod || !minPeriod) {
            return ''
          } else {
            return time.getTime() > maxPeriod.getTime() || time.getTime() < minPeriod.getTime()
          }
        }
        console.log('repos.data.dataAnalysis====>', repos.data.dataAnalysis)
        let dataAnalysisParams = {
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut_501',
          dataSource: dataAnalysis,
          id: uuidv4(),
          periodRange: [dataAnalysis.startPeriod, dataAnalysis.endPeriod],
          visible: false
        }
        this.msgList.push(dataAnalysisParams)
        this.isClick = true
        this.goEnd()
        this.$nextTick(() => {
          this.get501DateEcharts(dataAnalysis, dataAnalysisParams.id)
          this.get501CtiyEcharts(dataAnalysis, dataAnalysisParams.id)
        })
        return
      } else if (repos.data.code == 400) {
        const msg = repos.data.data
        const fuzzyTexts = repos.data.fuzzyTexts
        const indicatorTexts = repos.data.indicatorTexts
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut',
          dataSource: {},
          content: msg,
          fuzzyTexts: fuzzyTexts,
          indicatorTexts: indicatorTexts
        })
        this.isClick = true
        this.goEnd()
        return
      } else if (repos.data.code != 200) {
        const msg = repos.data.message
        const fuzzyTexts = repos.data.fuzzyTexts
        const indicatorTexts = repos.data.indicatorTexts
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut',
          dataSource: {},
          // content: '当前我还未学习此类知识，后续我将联系管理员把此类知识作为学习点。',
          content: msg,
          fuzzyTexts: fuzzyTexts,
          indicatorTexts: indicatorTexts
        })
        this.isClick = true
        this.goEnd()
        return
      }
      if (!res.column) {
        const result = res.result
        const arr = result.data[0]
        const fuzzyTexts = repos.data.fuzzyTexts
        const indicatorTexts = repos.data.indicatorTexts
        const allvalue = Object.values(arr).join('、')
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'chartOut',
          dataSource: {},
          content: arr,
          fuzzyTexts: fuzzyTexts,
          indicatorTexts: indicatorTexts
        })
      } else {
        this.contentRewrite = res.contentRewrite
        this.timeRewrite = res.timeRewrite
        this.msgList.push({
          time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          msgId: randNm(6),
          type: 'ansOut',
          dataSource: res,
          content: ''
        })
      }
      this.logSessionId = res.sessionId
      this.isClick = true
      this.goEnd()
    },

    get501DateEcharts: function (dataAnalysis, id) {
      var vm = this
      vm.goEnd()
      var xList = []
      var yList = []
      if (dataAnalysis.dataAnalysisDates.length == 0) return false
      dataAnalysis.dataAnalysisDates.forEach((item) => {
        xList.push(item.period)
        yList.push(to_fiexd(item.sumval, 2))
      })
      let rowNum = 3
      let series = [
        {
          name: dataAnalysis.indicatorChinese,
          type: 'line',
          // smooth: true,
          smooth: true,
          symbol: 'circle',
          symbolSize: fontSize(0.1),
          itemStyle: {
            //下面是拐点样式配置属性
            color: '#6aa0f6', //这里设置的拐点颜色
            borderColor: '#fff', //  拐点边框颜色
            borderWidth: WidthAdaptive(1) //  拐点边框宽度
            // shadowColor: "#F5F5F5", //  阴影颜色
            // shadowBlur: 2, //  阴影渐变范围控制
          },
          data: yList,
          markPoint: {
            symbol: 'pin', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow',
            symbolSize: 50,
            itemStyle: {
              // color:"#fff"
            },
            label: {
              // position: "insideCenter",
              distance: 7,
              textStyle: {
                //数值样式
                color: '#02144f',
                fontSize: fontSize(0.1)
              }
            },
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          label: {
            show: false, //开启显示
            position: 'top', //在上方显示
            formatter: function (value) {
              return yList[value.dataIndex]
            },
            textStyle: {
              //数值样式
              color: '#6aa0f6',
              fontSize: fontSize(0.15)
            }
          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#6aa0f6'
                  },
                  {
                    offset: 1,
                    color: '#dae6f9'
                  }
                ],
                false
              ),
              shadowColor: '#EDF7FC', //阴影颜色
              shadowBlur: fontSize(0.2) //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          }
        }
      ]
      let myChart = this.$echarts.init(document.getElementById('echarts501Analysis_1_' + id))
      let options = {
        backgroundColor: 'transparent',
        color: ['#6aa0f6'],
        tooltip: {
          show: true,
          trigger: 'axis',
          // axisPointer: {
          //   // type: 'shadow',
          //   type: 'cross'
          // },
          formatter: (v) => {
            var html = `<div><span style="color: #666">${v[0].name}</span><br>`
            html += `<div>
                      <span style="color: #666;display: flex;align-items: center">
                        <div style="border-radius: 2px;width: 10px;height: 10px;background:#6aa0f6;margin-right: 7px"></div>
                        ${dataAnalysis.indicatorChinese}:&emsp;
                        <span style="color: #333;font-size: 14px">${v[0].data}</span>
                        <span style="color:#999;font-size: 12px">&nbsp;${dataAnalysis.unitName}</span>
                      </span>
                    </div>`
            return html
          }
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     magicType: { type: ['line', 'bar'] },
        //   }
        // },
        dataZoom: [
          {
            type: 'inside',
            realtime: true,
            startValue: 0,
            endValue: xList.length > 5 ? 5 : xList.length,
            bottom: '-25px'
          }
        ],
        grid: {
          left: '10%',
          right: '10%',
          top: '20%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            textStyle: {
              color: '#333333',
              fontSize: WidthAdaptive(12)
            }
          },
          axisTick: { show: true },
          axisLine: {
            show: true,
            lineStyle: { color: '#cccccc', type: 'dashed' }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(135,140,147,0.2)'
            }
          },
          // boundaryGap: true,
          data: xList
        },
        yAxis: [
          {
            type: 'value',
            name: dataAnalysis.indicatorChinese + '(' + dataAnalysis.unitName + ')',
            splitNumber: rowNum,
            nameTextStyle: {
              color: '#6aa0f6',
              fontSize: WidthAdaptive(14),
              padding: [WidthAdaptive(8), WidthAdaptive(8), 0, 0]
            },
            alignTicks: true, // 使得0刻度对齐
            axisTick: { show: true },
            axisLabel: {
              textStyle: { color: '#333333', fontSize: WidthAdaptive(12) }
            },
            axisLine: {
              show: true,
              lineStyle: { color: '#cccccc', type: 'dashed' }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(135,140,147,0.2)'
              }
            },
            boundaryGap: [0, 0.1]
          }
        ],
        series: series
      }
      // 绘制图表
      myChart.setOption(options, true)
    },
    get501CtiyEcharts: function (dataAnalysis, id) {
      var vm = this
      vm.goEnd()
      var xList = []
      var x1List = []
      var x2List = []
      var y11List = []
      var y21List = []
      console.log('dataAnalysis===>', dataAnalysis)
      if (!dataAnalysis.dataAnalysisCities || dataAnalysis.dataAnalysisCities.length == 0) return
      dataAnalysis.dataAnalysisCities.forEach((item) => {
        xList.push(item.cityName)
        y11List.push(to_fiexd(item.curval, 2))
        y21List.push(to_fiexd(item.momval, 2))
        // y21List.push(to_fiexd(Math.random()*100,2))
      })
      let rowNum = 3
      let yAxis = [
        {
          type: 'value',
          name: dataAnalysis.indicatorChinese + '(' + dataAnalysis.unitName + ')',
          splitNumber: rowNum,
          nameTextStyle: {
            color: '#6aa0f6',
            fontSize: WidthAdaptive(14),
            padding: [WidthAdaptive(8), WidthAdaptive(8), 0, 0]
          },
          alignTicks: true, // 使得0刻度对齐
          axisTick: { show: true },
          axisLabel: {
            textStyle: { color: '#333333', fontSize: WidthAdaptive(12) }
          },
          axisLine: {
            show: true,
            lineStyle: { color: '#cccccc', type: 'dashed' }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(135,140,147,0.2)'
            }
          },
          boundaryGap: [0, 0.1]
        }
      ]
      let showTop = true
      if (y21List.length > 0) showTop = false
      let series = [
        {
          name: dataAnalysis.indicatorChinese,
          type: 'bar',
          barWidth: 20,
          smooth: true,
          data: y11List,
          itemStyle: {
            normal: {
              barBorderRadius: [1, 1, 0, 0]
            }
          },
          label: {
            show: showTop, //开启显示
            position: 'top', //在上方显示
            formatter: function (value) {
              return y11List[value.dataIndex]
            },
            textStyle: {
              //数值样式
              color: '#6aa0f6',
              fontSize: fontSize(0.15)
            }
          }
        }
      ]
      if (y21List.length > 0) {
        yAxis.push({
          type: 'value',
          name: '环比(%)',
          splitNumber: rowNum,
          nameTextStyle: {
            color: '#fcbd37',
            fontSize: WidthAdaptive(14),
            padding: WidthAdaptive(8)
          },
          axisTick: { show: true },
          axisLabel: {
            textStyle: { color: '#333333', fontSize: WidthAdaptive(12) }
          },
          axisLine: {
            show: true,
            lineStyle: { color: '#cccccc', type: 'dashed' }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(135,140,147,0.2)'
            }
          },
          boundaryGap: [0, 0.1],
          position: 'right'
        })
        series.push({
          name: '环比',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: fontSize(0.1),
          itemStyle: {
            //下面是拐点样式配置属性
            color: '#fcbd37', //这里设置的拐点颜色
            borderColor: '#fff', //  拐点边框颜色
            borderWidth: WidthAdaptive(1) //  拐点边框宽度
            // shadowColor: "#F5F5F5", //  阴影颜色
            // shadowBlur: 2, //  阴影渐变范围控制
          },
          data: y21List,
          yAxisIndex: 1,
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#fcbd37',
              fontSize: fontSize(0.16)
            }
          }
        })
      }
      let myChart = this.$echarts.init(document.getElementById('echarts501Analysis_2_' + id))
      let options = {
        backgroundColor: 'transparent',
        color: ['#6aa0f6', '#fcbd37'],
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (v) => {
            var html = `<div><span style="color: #666">${v[0].name}</span><br>`
            if (y11List.length - 1 >= v[0].dataIndex) {
              html += `<div>
                <span style="color: #666;display: flex;align-items: center">
                  <div style="border-radius: 2px;width: 10px;height: 10px;background:#6aa0f6;margin-right: 7px"></div>
                  ${dataAnalysis.indicatorChinese}:&emsp;
                  <span style="color: #333;font-size: 14px">${v[0].data}</span>
                  <span style="color:#999;font-size: 12px">&nbsp;${dataAnalysis.unitName}</span>
                </span>`
            }
            html += `<span style="color: #666;display: flex;align-items: center">
                    <div style="border-radius: 1rem;width: 10px;height: 10px;background:#fcbd37;margin-right: 7px"></div>
                    环比:&emsp;
                    <span style="color: #333;font-size: 14px">${y21List[v[0].dataIndex]}</span>
                    <span style="color:#999;font-size: 12px">&nbsp;%</span>
                  </span>`
            html += `</div>`
            return html
          }
        },
        legend: {
          itemHeight: fontSize(0.12), //图例的高度
          itemWidth: fontSize(0.12),
          data: [dataAnalysis.indicatorChinese, '环比']
        },
        dataZoom: [
          {
            // show: false,
            type: 'inside',
            realtime: true,
            startValue: 0,
            endValue: xList.length > 5 ? 5 : xList.length,
            bottom: '-25px'
          }
        ],
        grid: {
          left: '10%',
          right: '10%',
          top: '20%',
          bottom: '10%'
          // containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#333333',
              fontSize: WidthAdaptive(12)
            }
            // interval:0,//横轴信息全部显示
            // rotate:10,//-15度角倾斜显示
          },
          axisTick: { show: true },
          axisLine: {
            show: true,
            lineStyle: { color: '#cccccc', type: 'dashed' }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(135,140,147,0.2)'
            }
          },
          boundaryGap: true,
          data: xList
        },
        yAxis: yAxis,
        series: series
      }
      // 绘制图表
      myChart.setOption(options, true)
    },
    changeDate501(row, dateTime) {
      console.log('dateTime====>', dateTime)
      row.visible = !row.visible
      let dataSource = row.dataSource
      let startDate =
        dataSource.dataType == 'M'
          ? moment(dateTime).format('YYYYMM')
          : moment(dateTime).format('YYYYMMDD')
      let endDate =
        dataSource.dataType == 'M'
          ? moment(dateTime).format('YYYYMM')
          : moment(dateTime).format('YYYYMMDD')
      let params = {
        dataType: dataSource.dataType,
        tableCode: dataSource.tableCode,
        indicatorName: dataSource.indicatorName,
        orgName: dataSource.orgName,
        orgVal: dataSource.orgVal,
        dbId: dataSource.dbId,
        userId: dataSource.userId,
        indicatorChinese: dataSource.indicatorChinese,
        startDate: startDate,
        endDate: endDate,
        id: row.id,
        conditionName: dataSource.conditionName,
        conditionValue: dataSource.conditionValue,
        unitName: dataSource.unitName
      }
      getDataAnalysis(params).then((res) => {
        console.log('res====>', res)
        if (res.data.code == 200) {
          let data = res.data.data
          // dataAnalysis.disabledDate=(time) => {
          //   if(!maxPeriod||!minPeriod){
          //     return ""
          //   }else {
          //     return time.getTime() > maxPeriod.getTime()||time.getTime() < minPeriod.getTime()
          //   }
          // }
          this.msgList.forEach((item) => {
            console.log('item.id====>', item.id)
            console.log('data.talkId====>', data.talkId)
            if (item.id == data.talkId) {
              item.dataSource = data
            }
          })
          this.$nextTick(() => {
            this.get501DateEcharts(data, data.talkId)
            this.get501CtiyEcharts(data, data.talkId)
          })
          console.log('this.msgList====>', this.msgList)
        }
      })
    },
    getDataAnalysis(row, num) {
      console.log('row====>', row)
      let dataSource = row.dataSource
      let startDate =
        dataSource.dataType == 'M'
          ? moment(new Date()).add(num, 'M').format('YYYYMM')
          : moment(new Date()).add(num, 'd').format('YYYYMMDD')
      let endDate =
        dataSource.dataType == 'M'
          ? moment(new Date()).add(num, 'M').format('YYYYMM')
          : moment(new Date()).add(num, 'd').format('YYYYMMDD')
      let params = {
        dataType: dataSource.dataType,
        tableCode: dataSource.tableCode,
        indicatorName: dataSource.indicatorName,
        orgName: dataSource.orgName,
        orgVal: dataSource.orgVal,
        dbId: dataSource.dbId,
        userId: dataSource.userId,
        indicatorChinese: dataSource.indicatorChinese,
        startDate: startDate,
        endDate: endDate,
        id: row.id,
        conditionName: dataSource.conditionName,
        conditionValue: dataSource.conditionValue,
        unitName: dataSource.unitName
      }
      getDataAnalysis(params).then((res) => {
        console.log('res====>', res)
        if (res.data.code == 200) {
          let data = res.data.data
          this.msgList.forEach((item) => {
            console.log('item.id====>', item.id)
            console.log('data.talkId====>', data.talkId)
            if (item.id == data.talkId) {
              item.dataSource = data
            }
          })
          this.$nextTick(() => {
            this.get501DateEcharts(data, data.talkId)
            this.get501CtiyEcharts(data, data.talkId)
          })
          console.log('this.msgList====>', this.msgList)
        }
      })
    },
    getDataBySql(param) {
      var that = this
      this.showThiking = true
      this.isClick = false
      getValFromSQL(param)
        .then((repos) => {
          console.log('repos.data.code====>', repos.data.code)
          this.showThiking = false
          var res = repos.data.data
          //知识问答
          if (res.answerType == '3') {
            let sourceDatas = []
            res.answer.docs.forEach((item) => {
              let sourceData = item.split(')')[1].replace(/\n/g, '').replace(/\r/g, '')
              sourceData = '{' + sourceData + '}'
              sourceData = JSON.parse(sourceData)
              sourceDatas.push(sourceData)
            })
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartKnowledgeOut',
              dataSource: {},
              content: res.answer.answer,
              sourceDatas: sourceDatas,
              sourceDatasFlag: false
            })
            that.isClick = true
            that.goEnd()
            return
          }
          //智能取数
          if (repos.data.code == 410) {
            //无指标无维度
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut_410',
              dataSource: {}
            })
            that.isClick = true
            that.goEnd()
            return
          } else if (
            repos.data.code == 411 ||
            repos.data.code == 413 ||
            repos.data.code == 414 ||
            repos.data.code == 422 ||
            repos.data.code == 424
          ) {
            /**
             * 1无指标有维度
             * 2指标实体映射存在多指标
             * 3中台返回账期不对
             * 4中台权限不匹配时，根据用户权限推荐问题改造
             */
            const fuzzyTexts = repos.data.fuzzyTexts
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut_recommend',
              dataSource: {},
              content: '我还在成长，没能找到答案，您可以尝试下面的问题：',
              fuzzyTexts: fuzzyTexts
            })
            that.isClick = true
            that.goEnd()
            return
          } else if (repos.data.code == 423) {
            //无表访问权限时，提供申请权限按钮
            const msg = repos.data.data
            const tableName = repos.data.fuzzyTexts[0]
            const tableCode = repos.data.fuzzyTexts[1]
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut_423',
              dataSource: {},
              content: msg,
              tableName: tableName,
              tableCode: tableCode
            })
            that.isClick = true
            that.goEnd()
            return
          } else if (repos.data.code == 400) {
            const msg = repos.data.data
            const fuzzyTexts = repos.data.fuzzyTexts
            const indicatorTexts = repos.data.indicatorTexts
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut',
              dataSource: {},
              content: msg,
              fuzzyTexts: fuzzyTexts,
              indicatorTexts: indicatorTexts
            })
            that.isClick = true
            that.goEnd()
            return
          } else if (repos.data.code != 200) {
            const msg = repos.data.message
            const fuzzyTexts = repos.data.fuzzyTexts
            const indicatorTexts = repos.data.indicatorTexts
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut',
              dataSource: {},
              // content: '当前我还未学习此类知识，后续我将联系管理员把此类知识作为学习点。',
              content: msg,
              fuzzyTexts: fuzzyTexts,
              indicatorTexts: indicatorTexts
            })
            that.isClick = true
            that.goEnd()
            return
          }

          if (!res.column) {
            const result = res.result
            const arr = result.data[0]
            const fuzzyTexts = repos.data.fuzzyTexts
            const indicatorTexts = repos.data.indicatorTexts
            const allvalue = Object.values(arr).join('、')
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'chartOut',
              dataSource: {},
              content: arr,
              fuzzyTexts: fuzzyTexts,
              indicatorTexts: indicatorTexts
            })
          } else {
            this.contentRewrite = res.contentRewrite
            this.timeRewrite = res.timeRewrite
            this.msgList.push({
              time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              msgId: randNm(6),
              type: 'ansOut',
              dataSource: res,
              content: ''
            })
          }
          this.logSessionId = res.sessionId
          this.isClick = true
          this.goEnd()
        })
        .catch((err) => {
          // debugger;
          this.showThiking = false
          this.$nextTick(() => {
            $('#in-put').focus()
          })
          this.isClick = true
          this.msgList.push({
            time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
            msgId: randNm(6),
            type: 'chartOut',
            dataSource: {},
            content: '当前我还未学习此类知识，后续我将联系管理员把此类知识作为学习点。'
          })
          that.goEnd()
        })
    },
    handleEnterKey() {
      // this.showIpt = false
      if (!this.isShow) {
        this.sendText()
      }
    },
    goBlur() {
      setTimeout(() => {
        this.isShow = false
        // this.showIpt = false
        // this.goEnd()
      }, 200)
    },
    goFocus() {
      // this.showIpt = true
      this.goEnd()
    },
    /**
     * 聊天记录滚动到底部
     */
    goEnd() {
      this.$nextTick(() => {
        $('#in-put').focus()
        setTimeout(() => {
          this.$refs.chat_main.scrollTop = this.$refs.chat_main.scrollHeight + 300
        }, 100)
      })
    },
    formatDateFun(date, format) {
      return formatDate(date, format)
    },
    to_fiexd_fun(val, num) {
      return to_fiexd(val, num)
    },
    onOpenHistory() {
      this.historyShow = true
    },
    onCloseHistory() {
      this.historyShow = false
    },
    selectHistory(dialogId) {
      this.dialogId = dialogId
      getHistoryById({ dialogId }).then((res) => {
        this.msgList = []
        res.data.data.forEach((item) => {
          this.msgList.push({
            time: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
            msgId: randNm(6),
            type: 'chatIn',
            dataSource: {},
            content: item.question,
            visible: false
          })
          const answerData = item.result
          this.answerDataHandler({ data: JSON.parse(answerData) })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chatpage-wrap {
  position: relative;
  height: 100%;
  display: flex;
  .open-list {
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    padding: 10px 5px;
    text-align: center;
    border-radius: 0 10px 10px 0;
    border: 1px solid #e2e7f5;
    border-left: none;
    cursor: pointer;
    z-index: 1;
  }
  .session-list {
    flex-shrink: 0;
    flex-grow: 0;
    height: 100%;
    overflow-y: auto;
  }
  .box {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
}

.route-link-out,
.route-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5c7cff;
  height: 0.2rem;
  cursor: pointer;
  width: 100%;
  background: #fff;
}
.route-link:hover {
  background: #5c7cff;
  color: #fff;
}

.relative-container {
  position: relative;
  width: 100%;
  /* 其他样式 */
}

.suspended-gif {
  position: fixed; /* 修改为 fixed 定位 */
  top: 50%; /* 保持在顶部50%的位置 */
  right: 300px; /* 保持在右侧0的位置 */
  //width: 15%; /* 图片宽度 */
  height: 300px; /* 图片宽度 */
  transform: translateY(-50%); /* 使用 transform 将元素向上移动其高度的50%，以实现垂直居中 */
}
.left-wrap {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  .txt {
    color: #000000;
  }
  .dy-txt {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(134.07299893953243deg, #bd55d7 0%, #4473de 100%);
  }
}
.dianji-wrap {
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  padding-left: 14px;
  background: linear-gradient(148deg, #82c7ff 0%, #4473de 100%);
  border-radius: 20px;
  margin-left: 10px;
  .dianji-txt {
    color: #ffffff;
    font-size: 18px;
  }
  .dianji-img {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    img {
      width: 31px;
      height: 31px;
    }
  }
}
</style>
